<!-- 数据字典多选下拉 -->
<template>
	<view class="">
		<view class="" @click="onShowPicker">
			<u--input
			    :placeholder="placeholder"
				:placeholderClass="placeholderClass"
				:placeholderStyle="placeholderStyle"
				:inputAlign="inputAlign"
				:fontSize="fontSize"
				:color="color"
				:prefixIcon="prefixIcon"
				:prefixIconStyle="prefixIconStyle"
				:suffixIcon="suffixIcon"
				:suffixIconStyle="suffixIconStyle"
			    :border="border"
				:shape="shape"
				:customStyle="customStyle"
			    v-model="title"
				disabled
				:disabledColor="disabledColor"
				
			></u--input>
		</view>
		<u-popup :show="showPicker" mode="bottom" height="60%">
			<view class="header">
				<view class="cancel btn" @click="showPicker = false">取消</view>
				<view class="confirm btn" @click="onConfirm">确认</view>
			</view>
			<scroll-view scroll-y="" class="scroll-view">
				<u-cell-group :border="false">
					<u-cell
						@click="chooseOptions(index)" 
						:title="item.title"
						:arrow="false"
						:center="true"
						v-for="(item,index) in listByCodes" 
						:key="index"
						:titleStyle="{textAlign: 'center'}"
					>
						<view slot="right-icon">
							<u-icon name="checkbox-mark" size="18" :color=" !item.isChecker ? '#fff' : '#027EFF'"></u-icon>
						</view>
					</u-cell>
				</u-cell-group>
			</scroll-view>
		</u-popup>
	</view>
</template>

<script>
	import { 
		queryDictModelByCode, // 
		ajaxGetDictItems, //字典标签专用（通过code获取字典数组）
		serviceAjaxGetDictItems, // 获取系统级字典
	} from '@/api/index.js'
	import { initDictOptions } from '@/utils/JDictSelectUtil.js'
	
	export default {
		name: 'hDictMultiSelect',
		data() {
			return {
				title:'', // 选中的标题名称
				showPicker: false, // 是否显示弹窗
				listByCodes: [], // 字典列表
				loading: false, // 是否加載
				defaultIndex: [0], // 弹窗默认选中的列 - 默认选中第一列
			}
		},
		model: {
			prop: 'value',
			event: 'change',
		},
		props: {
			// 字典编号
			dictName: {
				type: String,
				default: ''
			},
			// 是否禁用
			disabled: {
				type: Boolean,
				default: false
			},
			// 选中的值
			value: {
				type: [String, Number],
				default: '',
			},
			// 输入框为空时的占位符
			placeholder: {
				type: [String, Number],
				default: '请选择',
			},
			// 指定placeholder的样式类，注意页面或组件的style中写了scoped时，需要在类名前写/deep/
			placeholderClass: {
				type: [String],
				default: '',
			},
			// 指定placeholder的样式，字符串/对象形式，如"color: red;"
			placeholderStyle: {
				type: [String, Object],
				default: 'color: #C0C4CC'
			},
			// 输入框内容对齐方式 - left | center | right
			inputAlign: {
				type: [String,],
				default: 'left',
			},
			// 输入框字体的大小
			fontSize: {
				type: [String, Number],
				default: '15px',
			},
			// 输入框字体颜色
			color: {
				type: [String],
				default: '#303133',
			},
			// 输入框前置图标
			prefixIcon: {
				type: [String],
				default: '',
			},
			// 前置图标样式，对象或字符串
			prefixIconStyle: {
				type: [String, Object],
				default: '',
			},
			// 输入框前置图标
			suffixIcon: {
				type: [String],
				default: '',
			},
			// 前置图标样式，对象或字符串
			suffixIconStyle: {
				type: [String, Object],
				default: '',
			},
			// 边框类型，surround-四周边框，bottom-底部边框，none-无边框
			border: {
				type: [String],
				default: 'surround',
			},
			// 输入框形状，circle-圆形，square-方形
			shape: {
				type: [String],
				default: 'square',
			},
			customStyle: {
				type: [Object],
				default: () => {},
			}
			
		},
		watch: {
			dictName: {
				handler (val) {
					if (val) {
						this.queryDictModelByCodes(val)
					}
				},
				immediate: true
			},
			// 监听哪个有值就先走哪个保证能回显title
			value: {
				handler (val) {
					if (!val) {
						this.title = ''
					} else {
						var arrValue = []
						this.title = ''
						arrValue = val.split(',')
						if (this.listByCodes && this.listByCodes.length) {
							this.listByCodes.map((value, index) => {
								value.isChecker = false
								arrValue.map((item, ind) => {
									if (value.value == item) {
										this.title = value.title + ',' + this.title
										value.isChecker = true
										// this.defaultIndex = [index]
									}
								})
								return value
							})
							this.title = this.title.substr(0,this.title.length-1)
						}
					}
				},
				immediate: true
			},
			listByCodes: {
				handler (val) {
					if (val && val.length) {
						if (this.value) {
							var arrValue = []
							this.title = ''
							arrValue = this.value.split(',')
							this.listByCodes.map((value, index) => {
								value.isChecker = false
								arrValue.map((item, ind) => {
									if (value.value == item) {
										this.title = value.title + ',' + this.title
										value.isChecker = true
									}
								})
								return value
							})
							this.title=this.title.substr(0,this.title.length-1)
						}
						
					}
				},
				immediate: true
			}
		},
		computed: {
			// 当是disabled为true改变禁用的颜色
			disabledColor () {
				if (this.disabled) {
					return '#f5f7fa'
				} else {
					return '#FFFFFF'
				}
			}
		},
		methods: {
			// 点击弹出弹框
			onShowPicker() {
				if (this.disabled) {
					return false
				}
				if (!this.listByCodes || !this.listByCodes.length) {
					uni.showToast({
						title: '暂无数据',
						icon: 'none'
					})
					return false
				}
			  this.showPicker = true
			},
			
			//字典
			queryDictModelByCodes(name) {
				var arrValue = []
				if (this.value) {
					arrValue = this.value.split(',')
				}
				this.loading = true
				initDictOptions(name).then(res => {
					if (res.success) {
						res.result.map((value, index) => {
							value.isChecker = false
							
							return value
						})
						this.listByCodes = res.result
					}
					this.loading = false
				}).catch(err => {
					this.loading = false
				})
			},
			// 点击确定
			onConfirm (item) {
				// this.title = item.value[0].title
				var codeValues = ''
				this.title = ''
				this.listByCodes.map((value, index) => {
					if (value.isChecker) {
						this.title = value.title + ',' + this.title
						codeValues = value.value + ',' + codeValues
					}
				})
				this.title=this.title.substr(0,this.title.length-1)
				codeValues = codeValues.substr(0, codeValues.length-1)
				this.$emit('change', codeValues);
				this.showPicker = false
			},
			
			// 点击取消
			onCancel () {
				this.showPicker = false
			},
			
			//选择选项
			chooseOptions(index) {
				this.listByCodes[index].isChecker = !this.listByCodes[index].isChecker;
			},
		},
		mounted() {
			//初始化数据
			this.queryDictModelByCodes(this.dictName);
		},
	}
</script>

<style lang="scss" scoped>
	.header {
		width: 100%;
		height: 80rpx;
		border-bottom: 1px solid #e4e7ed;
		display: flex;
		align-items: center;
		justify-content: space-between;
	
		.btn {
			height: 80rpx;
			padding: 0 30rpx;
			line-height: 80rpx;
		}
	
		.cancel {
			color: rgb(96, 98, 102);
		}
	
		.confirm {
			color: rgb(41, 121, 255);
		}
	}
	
	.scroll-view {
		height: calc(100% - 80rpx);
	}
</style>